<template>
  <ul class='tabbar'>
    <li
      class="tabbar-item"
      is="router-link"
      tag="li"
      replace
      v-for="tab in tabs"
      :key="tab.path"
      :to="tab.path"
    >
      <i class="iconfont" v-html="tab.meta.icon"></i>
      <span class="tabbar-item-badge" v-if="tab.meta.hasBadge && totalAmount">{{ totalAmount | moreThan99 }}</span>
      <span>{{tab.meta.title}}</span>
    </li>
  </ul>
</template>

<script>
import routes from '@/router/routes'

export default {
  name: 'Tabbar',
  data() {
    return {}
  },
  computed: {
    totalAmount() {
      return this.$store.getters.totalAmount
    },
    tabs() {
      return routes.filter(route => route.meta?.inTabbar)
    },
  },
  filters: {
    moreThan99(val) {
      return val > 99 ? '99+' : val
    },
  },
}
</script>

<style lang='less' scoped>
  @font-face {
    font-family: 'iconfont';  /* Project id 2946634 */
    src: url('http://at.alicdn.com/t/font_2946634_n5oiin32rt8.woff2?t=1637216735961') format('woff2'),
        url('http://at.alicdn.com/t/font_2946634_n5oiin32rt8.woff?t=1637216735961') format('woff'),
        url('http://at.alicdn.com/t/font_2946634_n5oiin32rt8.ttf?t=1637216735961') format('truetype');
  }

  .iconfont{
    font-family:"iconfont" !important;
    font-size:24px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
  }

  .tabbar {
    display: flex;
    border-top: 1px solid #ccc;
    height: 80px;
    padding: 12px 0;

    &-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      position: relative;

      &-badge {
        position: absolute;
        border: 4px solid #d81e06;
        display: inline-block;
        text-align: center;
        max-width: 50px;
        min-width: 30px;
        border-radius: 25px;
        font-size: 12px;
        top: -12px;
        left: 120px;
        color: #d81e06;
      }
    }

    .router-link-exact-active, .router-link-active {
      font-weight: 700;
      color: #d81e06;
    }
  }
</style>
